<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
    <style>
        .tablinks {
            border: none;
            width: 20%;
            height: 52px;
            clear: both;
            cursor: pointer;
        }

        .tab {
            display: flex;
            border: 1px solid #efefef;
        }

        .tablinks:hover {
            background-color: gray;
        }

        .tabcontent {
            animation: zx 1s linear;
            display: none;
            /* text-align: center; */
        }

        @keyframes zx {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        body .choose {
            background-color: gray;
        }
    </style>
</head>

<body>
    <div class="tab">
        <button class="tablinks">London</button>
        <button class="tablinks">Paris</button>
        <button class="tablinks">Tokyo</button>
    </div>

    <div id="London" class="tabcontent">
        <h3>London</h3>
        <p>London is the capital city of England.</p>
    </div>

    <div id="Paris" class="tabcontent">
        <h3>Paris</h3>
        <p>Paris is the capital of France.</p>
    </div>

    <div id="Tokyo" class="tabcontent">
        <h3>Tokyo</h3>
        <p>Tokyo is the capital of Japan.</p>
    </div>
    <script>
        let currentIndex = 0
        let btns = document.getElementsByClassName('tablinks')
        let boxs = document.getElementsByClassName('tabcontent')
        for (let i = 0; i < btns.length; i++) {
            //设置默认值
            boxs[currentIndex].style.display = "block"
            btns[currentIndex].classList.add('choose')
            btns[i].onclick = function () {
                currentIndex = i
                // console.log(i,currentIndex);
                for (let i = 0; i < boxs.length; i++) {
                    // debugger    
                    // 此处谷歌浏览器debugger出现bug.内外层i显示一致，但实际不一致
                    if (i == currentIndex) {
                        boxs[i].style.display = "block"
                        btns[i].classList.add('choose')
                    } else {
                        boxs[i].style.display = ''
                        btns[i].classList.remove('choose')
                    }
                }
            }
        }
    </script>
</body>

</html>